<template>
  <div id="app">
      <div class="title">饿了么</div>
      <div class="btn">
          <span :class="{active:cueeIndex==index}" @click="btnclick(index)" v-for="(item,index) in btnArr" :key="index">{{item}}</span>
      </div>
      <div class="good" v-for="(item,index) in goodList" :key="index">
          <div class="name">{{item.name}}</div>
          <div class="discounts">
              <span v-for="(item,index) in item.mianjian" :key="index">{{item}}</span>
          </div>
          <div class="good_img">
              <div class="img" >
                  <div v-for="(a,b) in item.pic " :key="b">
                      <img :src="a" alt="">
                  </div>
              </div>
              <div class="good_price">
                  <span>￥{{item.price}}</span><br>
                  <span>共{{item.mess}}件</span>
              </div>
          </div>
          <div class="footer">
              <span class="again">
                  {{item.btn}}
               </span>
          </div>
          
      </div>
  </div>
</template>

<script>
import pic1 from '../../assets/1.webp'
import pic2 from '../../assets/2.webp'
import pic3 from '../../assets/3.webp'
export default {
  data(){
      return{
          cueeIndex:0,
          btnArr:['全部','代消费','待评价','退款'],
          goodList:[
              {name:'纯手工饺子(风城九路店)',mianjian:['10减3','25减10','50减21'],pic:[pic1,pic2],price:17.8,mess:2,btn:"再来一单"},
              {name:'唐九便利店(海荣名城店)',pic:[pic3,pic1,pic2],price:18.3,mess:3,btn:"再来一单"},
              {name:'纯手工饺子(风城九路店)',pic:[pic1,pic3],price:28.89,mess:2,btn:"再来一单"}

          ]
      }
  },
  methods:{
      btnclick(index){
          this.cueeIndex=index;
      }
  }
}
</script>

<style lang="scss" scoped>
  *{
      margin: 0;
      padding: 0;
  }
  #app{
      
      padding: 10px 10px;
      box-sizing: border-box;
      background: #f5f5f5;
  }
  .title{
      width: 100%;
      height: 50px;
      text-align: center;
      line-height: 50px;
      font-weight: bold;

  }
  .btn{
      width: 100%;
      display: flex;

  }
  .active{
      font-weight: bold;
      border-bottom: 2px solid aqua;

  }
  .btn span {
      line-height: 50px;
      margin-right: 20px;
  }
  .good{
      width: 100%;
      height: 180px;
      background: white;
      margin-top: 10px;
      padding: 0 10px;
      box-sizing: border-box;
  }
  .good .name {
      height: 30px;
      line-height: 30px;
      font-weight: bold;
  }
  .good .discounts {
      width: 100%;
  }
  .good .discounts span{
      border: 1px solid red;
      color: red;
      padding: 0 5px;
      font-size: 12px;
      margin: 10px;
      display: inline-block;
  }
  .good .good_img{
      width: 100%;
      display: flex;
      justify-content: space-between;
  }
  .good .good_img .img{
      width: 50px;
      height: 50px;
      display: flex;
  }
  .good .good_img .img div{
      margin-right: 5px;
      border: 1px solid #ccc;
  }
  .good .good_img .img img{
      width: 50px;
      height: 50px;
  }
  .good .good_img  .good_price{
      line-height: 30px;
  }
  .good .good_img  .good_price span:nth-child(1){
     font-weight: bold;
  }
  .good .good_img  .good_price span:nth-child(3){
      font-size: 14px;
  }
  .footer{
      display: flex;
      justify-items: right;
  }
   .good .again{
      display: inline-block;
     padding: 10px 15px;
      border: 1px solid rgb(65, 194, 238);
      border-radius: 48px;
     margin-left:239px;
   }
</style>